Browser wallet

To connect to a wallet in a web3-enabled browser, use activateBrowserWallet returned by useEthers(). Once connected account variable will be available.

See example below:

  export function App() {
    const { activateBrowserWallet, account } = useEthers()
    return (
      <div>
        {!account && <button onClick={activateBrowserWallet}> Connect </button>}
        {account && <p>Account: {account}</p>}
      </div>
    )
  }

useEthers

useEthers hook returns a number of useful functions and variables, see below:

• account - current user account (or null if not connected or connected in read-only mode)

• chainId - current chainId (or undefined if not connected)

• library - an instance of ethers Web3Provider (or undefined if not connected). Read more about ethers providers here.

• active - boolean that indicates if provider is connected (read or write mode)

• activate - function that allows to connect to a wallet. This is a web3-react function that can take various connectors.

• deactivate - function that disconnects wallet

• error - an error that occurred during connecting (e.g. connection is broken, unsupported network)

• switchNetwork - a function which, given a chainId, will ask the browser wallet to switch the network, and if the network hasn't been added yet, will make an attempt to add the network to the wallet. Only compatible with Metamask.

Example

Example below demonstrates how to manage and use connection.

Application allow to see the balance of Ethereum 2.0 staking contracts in read-only mode. When wallet is connected additionally it shows user's account along with it's balance.

App.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { formatEther } from '@ethersproject/units'
import { Mainnet, DAppProvider, useEtherBalance, useEthers, Config, Goerli } from '@usedapp/core'
import { getDefaultProvider } from 'ethers'
import { AccountIcon } from './components/AccountIcon'

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'

export function App() {
  const { account, activateBrowserWallet, deactivate, chainId } = useEthers()
  const userBalance = useEtherBalance(account)
  const stakingBalance = useEtherBalance(STAKING_CONTRACT)
  if (!config.readOnlyUrls[chainId]) {
    return <p>Please use either Mainnet or Goerli testnet.</p>
  }

  const ConnectButton = () => (
    <div>
      <button onClick={() => activateBrowserWallet()}>Connect</button>
      <p>Connect to wallet to interact with the example.</p>
    </div>
  )

  const MetamaskConnect = () => (
    <div>
      {account && (
        <div>
          <div className="inline">
            <AccountIcon account={account} />
            &nbsp;
            <div className="account">{account}</div>
          </div>
          <br />
        </div>
      )}
      {!account && <ConnectButton />}
      {account && <button onClick={deactivate}>Disconnect</button>}
      <br />
    </div>
  )

  return (
    <div>
      <MetamaskConnect />
      {userBalance && (
        <div className="balance">
          <br />
          Ether balance:
          <p className="bold">{formatEther(userBalance)} ETH</p>
        </div>
      )}
      {stakingBalance && (
        <div className="balance">
          ETH2 staking balance:
          <p className="bold">{formatEther(stakingBalance)} ETH</p>
        </div>
      )}
    </div>
  )
}